<template>
    <sub-box>
        <breadcrumb :title="'通知详情'"></breadcrumb>
        <div class="box white-block" v-loading="loading">
            <el-form class="form-common" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="1.2rem">
                <el-form-item label="通知标题" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="生效时间" required>
                    <el-col :span="11">
                        <el-form-item prop="startTime">
                            <el-date-picker
                                v-model="ruleForm.startTime"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择开始时间"
                                style="width: 100%;">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col class="text-center" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-form-item prop="endTime">
                            <el-date-picker
                                v-model="ruleForm.endTime"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择结束时间"
                                style="width: 100%;">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="发布平台" prop="value">
                    <el-select v-model="ruleForm.value" placeholder="请选择" class="openWay">
                        <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="通知详情" prop="detail">
                    <!--<el-input v-model="ruleForm.detail" type="textarea" class="textarea"-->
                              <!--:autosize="{ minRows: 4, maxRows: 4}"></el-input>-->
                    <vue-ueditor-wrap v-model="ruleForm.detail" :config="myConfig" style="line-height: 1"></vue-ueditor-wrap>
                </el-form-item>
                <el-form-item class="text-center btns">
                    <el-button type="primary" size="large" @click="save('ruleForm')">保存</el-button>
                    <el-button size="large" @click="$router.back(-1)">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </sub-box>
</template>

<script>
    import breadcrumb from '../../components/breadcrumb'
    import subBox from '../../components/layout/layout-sub'
    import VueUeditorWrap from 'vue-ueditor-wrap'

    export default {
        data() {
            let _this = this, blurEndTime = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请选择结束时间'))
                } else if (_this.ruleForm.startTime && _this.ruleForm.startTime > value) {
                    return callback(new Error('开始时间不能大于结束时间'))
                } else {
                    callback()
                }
            }
            return {
                ruleForm: {
                    name: '',
                    startTime: '',
                    endTime: '',
                    value: '',
                    detail: ''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入通知标题', trigger: 'blur'}
                    ],
                    value: [
                        {required: true, message: '请选择发布平台', trigger: 'change'}
                    ],
                    startTime: [
                        {required: true, message: '请选择开始时间', trigger: 'blur'}
                    ],
                    endTime: [
                        {validator: blurEndTime, trigger: 'blur'}
                    ]
                },
                options: [],
                data: null,
                loading: false,
                id: null,
                myConfig: {
                    // 编辑器不自动被内容撑高
                    autoHeightEnabled: false,
                    // 初始容器高度
                    initialFrameHeight: 340,
                    // 初始容器宽度
                    initialFrameWidth: '100%',
                    // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
                    serverUrl: 'http://35.201.165.105:8000/controller.php',
                    // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
                    UEDITOR_HOME_URL: '/static/UEditor/'
                }
            }
        },
        mounted() {
            this.id = this.$route.params.id
            this.getAppList()
            if (this.id) this.getDetail()
        },
        methods: {
            getAppList() {
                this.$http.get('/gsNotice/getAppList').then(res => {
                    if (res.success) {
                        this.options = res.data
                    }
                })
            },
            getDetail() {
                if (!this.id) return
                this.$http.get('/gsNotice/getNoticeById', {
                    noticeId: this.id || ''
                }).then(res => {
                    if (res.success) {
                        let data = res.data
                        this.data = res.data
                        this.ruleForm.startTime = data.noticeStartTime || ''
                        this.ruleForm.endTime = data.noticeEndTime || ''
                        this.ruleForm.name = data.noticeName || ''
                        this.ruleForm.detail = data.noticeContentHtml || data.noticeContentText
                        this.ruleForm.value = data.noticePlatformId || ''
                    }
                    this.$method.updateView(false, true)
                })
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            },
            save(formName) {
                this.validate(formName, () => {
                    this.loading = true
                    this.$http.post('/gsNotice/saveOrUpdateNotice', {
                        // noticeContentText: this.ruleForm.detail,
                        noticeContentHtml: this.ruleForm.detail,
                        noticeEndTime: this.ruleForm.endTime,
                        noticeStartTime: this.ruleForm.startTime,
                        noticeName: this.ruleForm.name,
                        noticePlatformId: this.ruleForm.value,
                        noticeId: this.data ? this.data.noticeId : ''
                    }).then(result => {
                        this.loading = false
                        if (result.success) {
                            if (this.id) {
                                this.$emit('upload')
                            } else {
                                this.$emit('upload', 1)
                            }
                            this.$nextTick(() => {
                                this.$method.historyBack()
                            })
                        }
                    }).catch(() => {
                        this.loading = false
                    })
                })
            }
        },
        components: {
            breadcrumb,
            subBox,
            VueUeditorWrap
        }
    }
</script>
<style scoped lang="less">
    .box {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .form-common {
        width: 10rem;
        margin: 0 auto;
        .el-date-editor {
            float: left;
            width: 49%;
            margin-right: 2%;
            &:last-child {
                margin-right: 0;
            }
        }
    }

    .openWay {
        width: 100%;
    }
</style>
